<script setup>
import { ref, useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__slideInDown')
  ani002.value.classList.remove('animate__slideInDown')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__slideInDown')
    ani002.value.classList.add('animate__slideInDown')
  })
}

/** 表单提交 */
const stuName = ref('')
const stuClass = ref('')
const stuId = ref('')
async function handleSubmit(e) {
  e.preventDefault()

  try {
    const response = await fetch('/api/sign-up', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        stuName: stuName.value,
        stuClass: stuClass.value,
        stuId: stuId.value,
      }),
    })

    const result = await response.json()
    if (result.code === '0') {
      alert(`${result.msg}`)
      stuName.value = ''
      stuClass.value = ''
      stuId.value = ''
    } else {
      alert(`${result.msg}`)
    }
  } catch (error) {
    alert('网络错误，请稍后再试')
    console.error('提交失败:', error)
  }
}
</script>
<template>
  <div class="box">
    <form @submit="handleSubmit">
      <div class="title animate__animated" ref="ani-001">
        <p>欢迎加入书法社</p>
      </div>
      <div class="sign-up">
        <label for="stuName">姓名</label>
        <input type="text" id="stuName" v-model="stuName" />
      </div>
      <div class="sign-up">
        <label for="stuClass">班级</label>
        <input type="text" id="stuClass" v-model="stuClass" />
      </div>
      <div class="sign-up">
        <label for="stuId">学号</label>
        <input type="text" id="stuId" v-model="stuId" />
      </div>
      <div class="sign-up">
        <input type="submit" value="提交" />
      </div>

      <div class="qq animate__animated" ref="ani-002">
        <img src="@/assets/image/qq.png" style="width: 2rem; height: 2rem" />
        <div class="txt">
          <p>扫描进群交流</p>
          <p>QQ群：12341234</p>
        </div>
      </div>
    </form>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 0.3rem;
}

.box .title {
  font-size: 0.8rem;
  font-family: 'wangxizhi';
  text-align: center;
  margin-bottom: 1.5rem;
}

.box .sign-up {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.3rem;
}

.box .sign-up label {
  font-size: 0.4rem;
  font-weight: 900;
  margin-bottom: 0.1rem;
}

.box .sign-up label::before {
  content: '*';
  color: red;
  margin-right: 0.1rem;
}

.box .sign-up input[type='text'] {
  font-size: 0.6rem;
  width: 7rem;
  padding: 0.1rem 0.3rem;
  outline: none;
  border: none;
  border-bottom: 1px dashed #333;
  background-color: transparent;
}

.box .sign-up input[type='submit'] {
  height: 1rem;
  font-size: 0.4rem;
  font-weight: 900;
  border: none;
  border-radius: 0.1rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.box .qq {
  display: flex;
  align-items: center;
  background-color: #ccc;
  box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2);

  margin-top: 1rem;
}

.box .qq .txt {
  margin-left: 1rem;
  font-size: 0.4rem;
  font-weight: 900;
}

.box .qq .txt p:first-of-type {
  margin-bottom: 0.1rem;
}
</style>
